<template>
  <view class="rl-picker" :class="{ selected: selectedName }">
    <view class="rl-picker-label" @click="$refs.picker.open()">
      <text class="rl-picker-text">{{ selectedName || placeholder }}</text>
      <uv-icon name="arrow-right"></uv-icon>
    </view>
    <uv-picker ref="picker" :columns="columns" :keyName="keyName" @confirm="handlePickerConfirm"></uv-picker>
  </view>
</template>
<script>
export default {
  name: 'RlPicker',
  props: {
    columns: {
      type: [Array],
      default: () => []
    },
    placeholder: {
      type: [String],
      default: '请选择'
    },
    keyName: {
      type: [String],
      default: ''
    }
  },
  data() {
    return {
      selectedName: ''
    }
  },
  methods: {
    handlePickerConfirm(e) {
      if (e.value[0]) {
        this.selectedName = e.value[0][this.keyName]
      } else {
        this.selectedName = ''
      }
      this.$emit('confirm', e)
    }
  }
}
</script>

<style lang="scss">
.rl-picker {
  width: 100%;

  &.selected {
    .rl-picker-text {
      color: inherit;
    }
  }
}

.rl-picker-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rl-picker-text {
  color: rgb(192, 196, 204);
}
</style>
